<template>
  <div class="app">
    <h2 ref="title" class="title" :style="{color: titleColor}">{{message}}</h2>
    <button ref="btn" @click="changeTitle">修改title</button>
    <Banner ref="banner"></Banner>
    <Banner ref="banner1"></Banner>
    <Banner ref="banner2"></Banner>
    <Home ref="home"></Home>
  </div>
</template>

<script>
  import Banner from "./Banner.vue"
  import Home from "./Home.vue"
  export default {
    components: {
      Banner,
      Home
    },
    data() {
      return {
        message: "Hello World",
        titleColor: "red"
      }
    },
    methods: {
      changeTitle() {
        // 1.不建议直接操作原生DOM
        // const titleEl = document.querySelector(".title")
        // titleEl.textContent = "Hello World"
        this.message = "Hello Vue3"
        this.titleColor = "blue"
        // 2.获取h2/button元素
        console.log(this.$refs)
        console.log(this.$refs.title)
        console.log(this.$refs.btn)
        // 3.获取home组件实例
        console.log(this.$refs.home)
        // 3.1在父组件中可以主动的调用子组件的属性/方法
        this.$refs.banner.homeClick()
        // 3.2获取子组件实例中的元素
        console.log(this.$refs.home.$el)
        // 假设有两个根元素,vue3支持多个根元素,获取到的是#text,这是node节点
        console.log("banner元素: ")
        console.log(this.$refs.banner.$el) // 根元素
        // 3.3如果banner template是多个根,拿到的是第一个node节点
        // 开发中,一般template只有一个根元素
        console.log(this.$refs.banner.$el.nextElementSibling) // 第二个根元素
        // 4.$parent获取父组件实例
        console.log(this.$parent)
        // 5.$root获取根组件实例
        console.log(this.$root) // app个根组件实例还是app
      }
    }
  }
</script>

<style scoped>
</style>